<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
<input type="text" v-model="num1" placeholder="请输入第一个数">
<input type="text" v-model="num2" placeholder="请输入第二个数">
<input type="button" value="加" @click="f(1)">
<input type="button" value="减" @click="f(2)">
<input type="button" value="乘" @click="f(3)">
<input type="button" value="除" @click="f(4)">
<h1>{{result}}</h1>
</div>

<script src="JS/vue.min.js"></script>
<script>
  let v=new Vue({
    el: "body>div",
    data :{
      num1:"",
      num2:"",
      result:""
    },
    methods:{
        f(x) {
            if (isNaN(v.num1) || isNaN(v.num2)) {
                v.result = "输入错误！！";
                return;
            }
            switch (x) {
                case 1:
                    v.result = v.num1 * 1 + v.num2 * 1;
                    break;
                case 2:
                    v.result = v.num1 - v.num2;
                    break;
                case 3:
                    v.result = v.num1 * v.num2;
                    break;
                case 4:
                    v.result = v.num1 / v.num2;
                    break;
            }
        }



    }

  })
</script>

</body>
</html>